import 'package:flutter/material.dart';

// 弹性布局（Flex）

class FlexRoute extends StatefulWidget {
  @override
  _FlexRouteState createState() => _FlexRouteState();
}

class _FlexRouteState extends State<FlexRoute> {
  List<Widget> _wls;

  @override
  void initState() {
    super.initState();
    _wls = [
      // Flex 的两个子widget按1:2来占据水平空间
      Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Container(
              height: 30.0,
              color: Colors.red,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              height: 30.0,
              color: Colors.green,
            ),
          ),
        ],
      ),
      Padding(
        padding: const EdgeInsets.only(top: 20.0),
        child: SizedBox(
          height: 100.0,
          // Flex的三个子widget，在垂直方向按2:1:1占用100像素的空间
          child: Flex(
            direction: Axis.vertical,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  height: 30.0,
                  color: Colors.red,
                ),
              ),
              Spacer(
                flex: 1,
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 30.0,
                  color: Colors.green,
                ),
              )
            ],
          ),
        ),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("弹性布局Flex"),
      ),
      body: Column(children: _wls),
    );
  }
}
